<template>
  <div class="project">
    <div class="body" id="projectBody">
      <el-table
        border
        :data="tableData"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :height="tableHeight"
      >
        <el-table-column prop="proName" label="项目名称">
          <template slot-scope="scope">
            <div class="row">
              <span class="logoBox">
                <img
                  v-if="scope.row.proLogo"
                  :src="scope.row.proLogo"
                  alt=""
                  class="logo"
                />
              </span>
              <span class="name">{{ scope.row.proName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="four" label="项目类型">
          <template slot-scope="scope">
            <div class="row">
              <!-- <span class="iconBox">
                <i
                  v-if="scope.row.icon"
                  :class="scope.row.icon"
                  :style="{ backgroundColor: scope.row.iconBgColor }"
                ></i>
              </span> -->
              <span class="type">{{scope.row.four}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="修改时间"></el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="editHandle(scope.row)"
              title="点击进入模式"
              >进入模式</el-button
            >
            <!-- <el-button
              type="text"
              @click="pageDesignHandle(scope.row)"
              title="点击页面设计"
              >页面设计</el-button
            > -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pages">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pages.currentPage"
        :page-sizes="pages.pageSizes"
        :page-size="pages.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pages.total"
      >
      </el-pagination>
    </div>



    <el-dialog
  title="进入模式"
  :visible.sync="enterMode.show"
  width="30%"
  modal-append-to-body
  append-to-body
  :close-on-click-modal="false"
  :close-on-press-escape="false"
  :before-close="handleCloseEnterMode">
  <div style="display:flex; align-items:center; justify-content:center;padding:50px 0;">
    <p style="margin-right:10px;"><span style="color:red;position:relative;top:1px;left:-2px;">*</span>进入模式</p>
    <el-cascader clearable style="width:70%;"
    v-model="enterMode.value"
    :options="enterMode.options"
    @change="handleChangeEnterMode"></el-cascader>

  </div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="handleCloseEnterMode">取 消</el-button>
    <el-button type="primary" @click="handleDetermineEnterMode">确 定</el-button>
  </span>
</el-dialog>





  </div>
</template>
<script>
import tbLogo from "@/static/images/tb.png";
import jdLogo from "@/static/images/jd.png";
import zfbLogo from "@/static/images/zfb.png";
import mtLogo from "@/static/images/mt.png";
import snLogo from "@/static/images/sn.png";
import { getToken } from "@/utils/auth";
import headApi from '@/utils/hade';
export default {
  name: "project",
  data() {
    return {
      pageName:"项目列表页",
      tbLogo,
      jdLogo,
      zfbLogo,
      mtLogo,
      snLogo,
      loading: false,
      tableHeight: 0,
      tableData: [],
      list: [],
      //进入模式
      enterMode: {
        show: false,
        value: [],
        options: [ 
          {id: 1, value: '1', label: '码管理页面设置'},
          {id: 2, value: '2', label: '数据明细'},
          {id: 3, value: '3', label: '数据页面设置'},
          {id: 4, value: '4', label: '展业页面设置'},
          {id: 5, value: '5', label: '自定义表单页面设置', children: [
            {id: 6, value: '6', label: '自定义表单1'},
            {id: 7, value: '7', label: '自定义表单2'},
            {id: 8, value: '8', label: '自定义表单3'},
            {id: 9, value: '9', label: '自定义表单4'},
          ]},
        ]
      },
      pages: {
        currentPage: 1,
        pageSizes: [10, 20, 30],
        pageSize: 10,
        total: 10,
      },
    };
  },
  created() {},
  props: [],
  components: {},
  mounted() {
    this.$nextTick(() => {
      if (this.$parent.$parent.$parent.activeName === "project") {
        this.init();
      } else {
        setTimeout(() => {
          if (this.$parent.$parent.$parent.activeName === "project") {
            this.init();
          }
        }, 1000);
      }
    });
    window.resize = () => {
      this.setTableHeight();
    };
  },
  methods: {
    //初始化
    init() {
      this.getTableList();
      this.tableData = this.list;
      this.setTableHeight();
      setTimeout(() => {
        if (this.tableHeight === 0) {
          // //console.log("未检索到projectBody高度");
          this.setTableHeight();
        }
      }, 200);
    },
    //动态设置表格高度
    setTableHeight() {
      let bodyDom = document.getElementById("projectBody");
      if (bodyDom && bodyDom.getBoundingClientRect().height) {
        this.tableHeight = bodyDom.getBoundingClientRect().height;
      } else {
        if (this.$parent.$parent.activeName === "project") {
          setTimeout(() => {
            // //console.log("project再次获取table高度");
            this.setTableHeight();
          }, 1500);
        }
      }
    },
    //获取列表数据
    getTableList() {
      if (getToken()) {
        this.loading = true;
        this.tableData = [];///business/project/proUserList
        this.axios.get(`${headApi}/business/project/proUserList?pageNum=${this.pages.currentPage}&pageSize=1000`, 
            { headers: { Authorization: "Bearer " + getToken() } }
          )
          .then((res) => {
            this.loading = false;
            if (res && res.data) {
              let { code, data, msg } = res.data;
              if (code === 200) {
                this.tableData = data.list;
              } else {
                this.$message.error(msg);
              }
            } else {
              this.$message.error("接口请求失败");
            }
          })
          .catch((err) => {
            console.log(err);
            this.loading = false;
          });
      }
    },

    //获取项目和进入模式的对应关系
    getLinkList() {
      if (getToken()) {
        this.loading = true;
        this.tableData = [];
        this.axios.post(
            `${headApi}/appPageProject/list`, {},
            { headers: { Authorization: "Bearer " + getToken() } }
          )
          .then((res) => {
            this.loading = false;
            if (res && res.data) {
              let { code, data, msg } = res.data;
              if (code === 200) {
                // this.tableData = data;
              } else {
                this.$message.error(msg);
              }
            } else {
              this.$message.error("接口请求失败");
            }
          })
          .catch((err) => {
            console.log(err);
            this.loading = false;
          });
      }
    },


    // //新增
    // addHandle() {
    //   this.$message.info("开发中");
    // },
    //点击，进入模式
    editHandle() {
      // this.$message.info("开发中");
      this.enterMode.show = true;
    },
    // //页面设计
    // pageDesignHandle() {
    //   this.$message.info("开发中");
    // },
    //切换每页展示多少条数据
    handleSizeChange(pageSize) {
      this.pages.pageSize = pageSize;
      this.getTableList();
    },
    //点击分页
    handleCurrentChange(page) {
      this.pages.currentPage = page;
      this.getTableList();
    },
    //点击，关闭，进入模式，的弹窗
    handleCloseEnterMode() {
      this.enterMode.show = false;
    },
    //在进入模式，的弹窗中点击，确定按钮，
    handleDetermineEnterMode() {
      this.handleCloseEnterMode();
      this.$message.info("开发中");
    },
    //在进入模式，选择下拉选项的事件
    handleChangeEnterMode() {}
  },
  computed: {},
  watch: {},
};
</script>
<style scoped lang="scss">
.project {
  height: 100%;
  .body {
    margin-bottom: 15px;
    height: calc(100% - 47px);
    .el-table {
      height: 100%;
      .row {
        display: flex;
        align-items: center;
      }
      .logoBox,
      .iconBox {
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .logoBox {
        margin-right: 10px;
        .logo {
          width: 30px;
          height: 30px;
          border-radius: 100%;
        }
      }
      .iconBox {
        margin-right: 3px;
        i {
          width: 26px;
          height: 26px;
          font-size: 14px;
          border-radius: 100%;
          color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
  .pages {
    display: flex;
    justify-content: flex-end;
  }
}
</style>